<html>
  <head>
    <title>Select dropdown</title>
    <style>
    
      form { flow:row(label,select); border-spacing: 0.5em; margin:0.5em;}
      
      form > label { font:system; line-height:1.5em; display:block; min-width: max-content; text-align:right; }
    
      select[name=ddcm] option
      {
        padding-left:20px;
      }
      select[name=ddcm] option:checked
      {
        foreground-image:url(stock:checkmark);
        foreground-repeat:no-repeat;
        foreground-size:7px;
        foreground-position:8px 50%;
      }
      
      select[name=ddn]:empty > caption { color:red; }
    
    </style>
    <script>

      const form = document.$("form");
      const out = document.$("#out");
    
      document.on("click", "button#get", function()
      {
        var v = form.value;
        out.value = printf("%V",v);
      });

      document.on("click", "button#set", function()
      {
        var v = {
          ddm: ["Five","Six","Seven"],
          dde: "Five",
          dd: "Five",
          ddn: undefined // nullable
        };
        form.value = v;
        out.value = printf("%V",form.value);
      });

      document.on("click", "button#set-by-dom-ref", function()
      {
        for(var option of document.$$("option.toset"))
          option.execCommand("set-current");
      });

      document.on("change","select", function(evt,select) {
        console.log("change:", select, "value:", select.value); 
      });

      document.on("click", "#populate", function() {
        const countries = [
        "Afghanistan",
        "Albania",
        "Algeria",
        "American Samoa",
        "Andorra",
        "Angola",
        "Anguilla",
        "Antarctica",
        "Antigua And Barbuda",
        "Argentina",
        "Armenia"];

        var select = document.$("select[name=dd]");

        select.clear();
        let i = 0;
        for(var country of countries)
          select.append(<option value={i}>{country}</option>);
        select.value = 7;

    });
    
    </script>
  </head>
<body>

  <h3>&lt;select|dropdown&gt; variants</h3>

  <button #get>Get values</button>
  <button #set>Set values</button>
  <button #set-by-dom-ref>Set by DOM element reference</button>
  <button #populate>Populate options in first select</button>
  <form>
  <label>dropdown:</label>
  <select name=dd novalue="select country">
     <OPTION VALUE=1 >Afghanistan</OPTION><OPTION VALUE=2 >Albania</OPTION><OPTION VALUE=3 >Algeria</OPTION><OPTION VALUE=4 >American Samoa</OPTION><OPTION VALUE=5 >Andorra</OPTION><OPTION VALUE=6 >Angola</OPTION><OPTION VALUE=7 >Anguilla</OPTION><OPTION VALUE=8 >Antarctica</OPTION><OPTION VALUE=9 >Antigua And Barbuda</OPTION><OPTION VALUE=10 >Argentina</OPTION><OPTION VALUE=11 >Armenia</OPTION><OPTION VALUE=12 >Aruba</OPTION><OPTION VALUE=13 >Australia</OPTION><OPTION VALUE=14 >Austria</OPTION><OPTION VALUE=15 >Azerbaijan</OPTION><OPTION VALUE=16 >Bahamas</OPTION><OPTION VALUE=17 >Bahrain</OPTION><OPTION VALUE=18 >Bangladesh</OPTION><OPTION VALUE=19 >Barbados</OPTION><OPTION VALUE=20 >Belarus</OPTION><OPTION VALUE=21 >Belgium</OPTION><OPTION VALUE=22 >Belize</OPTION><OPTION VALUE=23 >Benin</OPTION><OPTION VALUE=24 >Bermuda</OPTION><OPTION VALUE=25 >Bhutan</OPTION><OPTION VALUE=26 >Bolivia</OPTION><OPTION VALUE=27 >Bosnia and Herzegovina</OPTION><OPTION VALUE=28 >Botswana</OPTION><OPTION VALUE=29 >Bouvet Island</OPTION><OPTION VALUE=30 >Brazil</OPTION><OPTION VALUE=31 >British Indian Ocean Territory</OPTION><OPTION VALUE=32 >Brunei Darussalam</OPTION><OPTION VALUE=33 >Bulgaria</OPTION><OPTION VALUE=34 >Burkina Faso</OPTION><OPTION VALUE=35 >Burundi</OPTION><OPTION VALUE=36 >Cambodia</OPTION><OPTION VALUE=37 >Cameroon</OPTION><OPTION VALUE=38 class="i-am-now-in">Canada</OPTION><OPTION VALUE=39 >Cape Verde</OPTION><OPTION VALUE=40 >Cayman Islands</OPTION><OPTION VALUE=41 >Central African Republic</OPTION><OPTION VALUE=42 >Chad</OPTION><OPTION VALUE=43 >Chile</OPTION><OPTION VALUE=44 >China</OPTION><OPTION VALUE=45 >Christmas Island</OPTION><OPTION VALUE=46 >Cocos (Keeling) Islands</OPTION><OPTION VALUE=47 >Colombia</OPTION><OPTION VALUE=48 >Comoros</OPTION><OPTION VALUE=49 >Congo</OPTION><OPTION VALUE=50 >Congo, Democratic Republic</OPTION><OPTION VALUE=51 >Cook Islands</OPTION><OPTION VALUE=52 >Costa Rica</OPTION><OPTION VALUE=53 >Cote d'Ivoire</OPTION><OPTION VALUE=54 >Croatia</OPTION><OPTION VALUE=55 >Cuba</OPTION><OPTION VALUE=56 >Cyprus</OPTION><OPTION VALUE=57 >Czech Republic</OPTION><OPTION VALUE=58 >Denmark</OPTION><OPTION VALUE=59 >Djibouti</OPTION><OPTION VALUE=60 >Dominica</OPTION><OPTION VALUE=61 >Dominican Republic</OPTION><OPTION VALUE=62 >East Timor</OPTION><OPTION VALUE=63 >Ecuador</OPTION><OPTION VALUE=64 >Egypt</OPTION><OPTION VALUE=65 >El Salvador</OPTION><OPTION VALUE=66 >Equatorial Guinea</OPTION><OPTION VALUE=67 >Eritrea</OPTION><OPTION VALUE=68 >Estonia</OPTION><OPTION VALUE=69 >Ethiopia</OPTION><OPTION VALUE=70 >Falkland Islands</OPTION><OPTION VALUE=71 >Faroe Islands</OPTION><OPTION VALUE=72 >Fiji</OPTION><OPTION VALUE=73 >Finland</OPTION><OPTION VALUE=74 >France</OPTION><OPTION VALUE=75 >French Guiana</OPTION><OPTION VALUE=76 >French Polynesia</OPTION><OPTION VALUE=77 >French Southern Territories</OPTION><OPTION VALUE=78 >Gabon</OPTION><OPTION VALUE=79 >Gambia</OPTION><OPTION VALUE=80 >Georgia</OPTION><OPTION VALUE=81 >Germany</OPTION><OPTION VALUE=82 >Ghana</OPTION><OPTION VALUE=83 >Gibraltar</OPTION><OPTION VALUE=84 >Greece</OPTION><OPTION VALUE=85 >Greenland</OPTION><OPTION VALUE=86 >Grenada</OPTION><OPTION VALUE=87 >Guadeloupe</OPTION><OPTION VALUE=88 >Guam</OPTION><OPTION VALUE=89 >Guatemala</OPTION><OPTION VALUE=90 >Guinea</OPTION><OPTION VALUE=91 >Guinea-Bissau</OPTION><OPTION VALUE=92 >Guyana</OPTION><OPTION VALUE=93 >Haiti</OPTION><OPTION VALUE=94 >Heard and Mc Donald Islands</OPTION><OPTION VALUE=95 >Holy See - Vatican City</OPTION><OPTION VALUE=96 >Honduras</OPTION><OPTION VALUE=97 >Hong Kong</OPTION><OPTION VALUE=98 >Hungary</OPTION><OPTION VALUE=99 >Iceland</OPTION><OPTION VALUE=100 >India</OPTION><OPTION VALUE=101 >Indonesia</OPTION><OPTION VALUE=102 >Iran, Islamic Republic</OPTION><OPTION VALUE=103 >Iraq</OPTION><OPTION VALUE=104 >Ireland</OPTION><OPTION VALUE=105 >Israel</OPTION><OPTION VALUE=106 >Italy</OPTION><OPTION VALUE=107 >Jamaica</OPTION><OPTION VALUE=108 >Japan</OPTION><OPTION VALUE=109 >Jordan</OPTION><OPTION VALUE=110 >Kazakstan</OPTION><OPTION VALUE=111 >Kenya</OPTION><OPTION VALUE=112 >Kiribati</OPTION><OPTION VALUE=113 >Korea, Peoples Republic</OPTION><OPTION VALUE=114 >Korea, Republic of</OPTION><OPTION VALUE=115 >Kuwait</OPTION><OPTION VALUE=116 >Kyrgyzstan</OPTION><OPTION VALUE=117 >Lao People's Republic</OPTION><OPTION VALUE=118 >Latvia</OPTION><OPTION VALUE=119 >Lebanon</OPTION><OPTION VALUE=120 >Lesotho</OPTION><OPTION VALUE=121 >Liberia</OPTION><OPTION VALUE=122 >Libyan Arab Jamahiriya</OPTION><OPTION VALUE=123 >Liechtenstein</OPTION><OPTION VALUE=124 >Lithuania</OPTION><OPTION VALUE=125 >Luxembourg</OPTION><OPTION VALUE=126 >Macau</OPTION><OPTION VALUE=127 >Macedonia</OPTION><OPTION VALUE=128 >Madagascar</OPTION><OPTION VALUE=129 >Malawi</OPTION><OPTION VALUE=130 >Malaysia</OPTION><OPTION VALUE=131 >Maldives</OPTION><OPTION VALUE=132 >Mali</OPTION><OPTION VALUE=133 >Malta</OPTION><OPTION VALUE=134 >Marshall Islands</OPTION><OPTION VALUE=135 >Martinique</OPTION><OPTION VALUE=136 >Mauritania</OPTION><OPTION VALUE=137 >Mauritius</OPTION><OPTION VALUE=138 >Mayotte</OPTION><OPTION VALUE=139 >Mexico</OPTION><OPTION VALUE=140 >Micronesia, Federated States</OPTION><OPTION VALUE=141 >Moldova, Republic of</OPTION><OPTION VALUE=142 >Monaco</OPTION><OPTION VALUE=143 >Mongolia</OPTION><OPTION VALUE=144 >Montserrat</OPTION><OPTION VALUE=145 >Morocco</OPTION><OPTION VALUE=146 >Mozambique</OPTION><OPTION VALUE=147 >Myanmar</OPTION><OPTION VALUE=148 >Namibia</OPTION><OPTION VALUE=149 >Nauru</OPTION><OPTION VALUE=150 >Nepal</OPTION><OPTION VALUE=151 >Netherlands</OPTION><OPTION VALUE=152 >Netherlands Antilles</OPTION><OPTION VALUE=153 >New Caledonia</OPTION><OPTION VALUE=154 >New Zealand</OPTION><OPTION VALUE=155 >Nicaragua</OPTION><OPTION VALUE=156 >Niger</OPTION><OPTION VALUE=157 >Nigeria</OPTION><OPTION VALUE=158 >Niue</OPTION><OPTION VALUE=159 >Norfolk Island</OPTION><OPTION VALUE=160 >Northern Mariana Islands</OPTION><OPTION VALUE=161 >Norway</OPTION><OPTION VALUE=162 >Oman</OPTION><OPTION VALUE=163 >Pakistan</OPTION><OPTION VALUE=164 >Palau</OPTION><OPTION VALUE=165 >Palestinian Territory</OPTION><OPTION VALUE=166 >Panama</OPTION><OPTION VALUE=167 >Papua New Guinea</OPTION><OPTION VALUE=168 >Paraguay</OPTION><OPTION VALUE=169 >Peru</OPTION><OPTION VALUE=170 >Philippines</OPTION><OPTION VALUE=171 >Pitcairn</OPTION><OPTION VALUE=172 >Poland</OPTION><OPTION VALUE=173 >Portugal</OPTION><OPTION VALUE=174 >Puerto Rico</OPTION><OPTION VALUE=175 >Qatar</OPTION><OPTION VALUE=176 >Reunion</OPTION><OPTION VALUE=177 >Romania</OPTION><OPTION VALUE=178 >Russian Federation</OPTION><OPTION VALUE=179 >Rwanda</OPTION><OPTION VALUE=180 >St. Helena</OPTION><OPTION VALUE=181 >Saint Kitts and Nevis</OPTION><OPTION VALUE=182 >Saint Lucia</OPTION><OPTION VALUE=183 >St. Pierre and Miquelon</OPTION><OPTION VALUE=184 >Saint Vincent - Grenadines</OPTION><OPTION VALUE=185 >Samoa (Independent)</OPTION><OPTION VALUE=186 >San Marino</OPTION><OPTION VALUE=187 >Sao Tome and Principe</OPTION><OPTION VALUE=188 >Saudi Arabia</OPTION><OPTION VALUE=189 >Senegal</OPTION><OPTION VALUE=190 >Seychelles</OPTION><OPTION VALUE=191 >Sierra Leone</OPTION><OPTION VALUE=192 >Singapore</OPTION><OPTION VALUE=193 >Slovakia</OPTION><OPTION VALUE=194 >Slovenia</OPTION><OPTION VALUE=195 >Solomon Islands</OPTION><OPTION VALUE=196 >Somalia</OPTION><OPTION VALUE=197 >South Africa</OPTION><OPTION VALUE=198 >South Georgia - South Sandwich</OPTION><OPTION VALUE=199 >Spain</OPTION><OPTION VALUE=200 >Sri Lanka</OPTION><OPTION VALUE=201 >Sudan</OPTION><OPTION VALUE=202 >Suriname</OPTION><OPTION VALUE=203 >Svalbard - Jan Mayen Islands</OPTION><OPTION VALUE=204 >Swaziland</OPTION><OPTION VALUE=205 >Sweden</OPTION><OPTION VALUE=206 >Switzerland</OPTION><OPTION VALUE=207 >Syrian Arab Republic</OPTION><OPTION VALUE=208 >Taiwan</OPTION><OPTION VALUE=209 >Tajikistan</OPTION><OPTION VALUE=210 >Tanzania</OPTION><OPTION VALUE=211 >Thailand</OPTION><OPTION VALUE=212 >Togo</OPTION><OPTION VALUE=213 >Tokelau</OPTION><OPTION VALUE=214 >Tonga</OPTION><OPTION VALUE=215 >Trinidad and Tobago</OPTION><OPTION VALUE=216 >Tunisia</OPTION><OPTION VALUE=217 >Turkey</OPTION><OPTION VALUE=218 >Turkmenistan</OPTION><OPTION VALUE=219 >Turks and Caicos Islands</OPTION><OPTION VALUE=220 >Tuvalu</OPTION><OPTION VALUE=221 >Uganda</OPTION><OPTION VALUE=222 >Ukraine</OPTION><OPTION VALUE=223 >United Arab Emirates</OPTION><OPTION VALUE=224 >United Kingdom</OPTION><OPTION VALUE=225 >United States</OPTION><OPTION VALUE=226 >United States Minor Islands</OPTION><OPTION VALUE=227 >Uruguay</OPTION><OPTION VALUE=228 >Uzbekistan</OPTION><OPTION VALUE=229 >Vanuatu</OPTION><OPTION VALUE=230 >Venezuela</OPTION><OPTION VALUE=231 >Viet Nam</OPTION><OPTION VALUE=232 >Virgin Islands (British)</OPTION><OPTION VALUE=233 >Virgin Islands (U.S.)</OPTION><OPTION VALUE=234 >Wallis and Futuna Islands</OPTION><OPTION VALUE=235 >Western Sahara</OPTION><OPTION VALUE=236 >Yemen</OPTION><OPTION VALUE=237 >Yugoslavia</OPTION><OPTION VALUE=238 >Zambia</OPTION><OPTION VALUE=239 >Zimbabwe</OPTION>
  </select>
  <label>combobox (editable select):</label> 
  <select name=dde editable>
    <option>One</option>
    <option>Two</option>
    <option.toset>Three</option>
    <option selected>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
    <option>Eleven</option>
    <option>Twelve</option>
  </select>
  <label>dropdown multiple:</label><select name=ddm multiple>
    <option>One</option>
    <option>Two</option>
    <option.toset>Three</option>
    <option selected>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
    <option>Eleven</option>
    <option>Twelve</option>
  </select>
  <label>dropdown with custom state styling:</label>
  <select name=ddcm>
    <option>One</option>
    <option>Two</option>
    <option.toset>Three</option>
    <option selected>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
    <option>Eleven</option>
    <option>Twelve</option>
  </select>
  <label>nullable dropdown:</label>
  <select name=ddn novalue="(nothing)">
    <option>One</option>
    <option>Two</option>
    <option.toset>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
    <option>Eleven</option>
    <option>Twelve</option>
  </select>
  <label>dropdown with groups:</label><select name=ddog>
    <option>One</option>
    <optgroup label="2..4">
      <option>Two</option>
      <option.toset>Three</option>
      <option>Four</option>
    </optgroup>
    <optgroup>
      <caption>5..8</caption>
      <option>Five</option>
      <option>Six</option>
      <option>Seven</option>
      <option>Eight</option>
    </optgroup>
    <option>Nine</option>
    <option>Ten</option>
    <option>Eleven</option>
    <option>Twelve</option>
  </select>
  
</form>  
<pre #out></pre>
  
</body>
</html>
